<template>
  <div>
    <div class="wrap">
      <div class="photo">
        <!-- <span v-if="king" class="king" >👑</span> -->
        <!-- <span v-if="king" class="king iconfont icon-huangguanguanjun2x"></span> -->
        <svg v-if="king" class="icon king" aria-hidden="true">
          <use xlink:href="#icon-huangguan3"></use>
        </svg>
        <span></span>
        <img  :class="king?'yes':'no'" :src="$store.state.order.user.img" @click="change" class="image" />
        <p @click="register">{{ users }}</p>
      </div>
      <!-- <span class="iconfont icon-weixinxiaochengxu"></span> -->
      <div class="wrap_header animate__animated animate__bounceInDown">
        <div class="wrap_headerTitle">
          <div class="_title">
            <div class="_text">
              <div class="_text_row">
                <img src="../../../../static/img/图片 2 Copy@1x.png" />
              </div>
              <div class="_text_row">
                <span>Moco会员</span>
                <a>畅听千万新故事</a>
              </div>
              <div class="_text_row">
                <button v-show="dredge" class="btn" @click="push_out">
                  立即开通
                </button>
                <button v-show="xufeis" class="btn">续费</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="wrap_menu">
        <div class="wrap_menuRow">
          <div class="wrap_menuRow_grid" @click="goStorys">
            <span class="span">
              <i class="iconfont icon-experiment-fill"></i>
            </span>
            <span class="span">我的故事</span>
          </div>
          <div class="wrap_menuRow_grid" @click="goBuy">
            <span class="span">
              <i class="iconfont icon-shopping_bag"></i>
            </span>
            <span class="span">我的购买</span>
          </div>
          <div class="wrap_menuRow_grid" @click="inviteFriend">
            <span class="span">
              <i class="iconfont icon-lianxiaolianmanyi-3"></i>
            </span>
            <span class="span">邀请好友</span>
          </div>
          <div class="wrap_menuRow_grid" @click="giveFriend">
            <span class="span">
              <i class="iconfont icon-liwu"></i>
            </span>
            <span class="span">赠送好友</span>
          </div>
        </div>

        <div class="wrap_menuRow">
          <div class="wrap_menuRow_grid" @click="free">
            <span class="span">
              <i class="iconfont icon-ziyuan1"></i>
            </span>
            <span class="span">优惠券</span>
          </div>
          <div class="wrap_menuRow_grid" @click="MacoAge">
            <span class="span">
              <i class="iconfont icon-iconpoint-copy"></i>
            </span>
            <span class="span">Maco蛋</span>
          </div>

          <div class="wrap_menuRow_grid" @click="linekefu">
            <span class="span">
              <i class="iconfont icon-erji"></i>
            </span>
            <span class="span">在线客服</span>
          </div>
          <div class="wrap_menuRow_grid" @click="babyType">
            <span class="span">
              <i class="iconfont icon-icon_xiaohai"></i>
            </span>
            <span class="span">通讯录</span>
          </div>
        </div>
      </div>
      <div class="wrap_down">
        <div class="wrap_down_container">
          <span v-show="flag" class="backLogin" @click="push_outbut"
            >退出登入</span
          >
        </div>
      </div>
      <!-- <Bottom></Bottom> -->
    </div>
  </div>
</template>
<script>
// import Bottom from "../../../components/bottom/index.vue";
import * as apis from "../../api/home";
import "../../../assets/font_5qa4r7ssku7/iconfont";
export default {
  data() {
    return {
      users: "欢迎登录",
      //名字锁定
      nameFlag: true,
      //退出登录
      flag: false,
      //立即开通
      dredge: true,
      //续费页面
      xufeis: false,
      //锁定立即开通
      lockdredge: true,
      // vip皇冠
      king: false,
    };
  },
  components: {
    // Bottom,
  },
  mounted() {
    let telephone = this.$store.state.order.user.title;
    let userName = this.$store.state.order.user.name;
    console.log(telephone);
    if (userName) {
      this.users = userName;
      this.nameFlag = false;
      this.flag = true;
      apis
        .Registereds({ phones: this.$store.state.order.user.title })
        .then((response) => {
          console.log(response.data.userType);
          if (response.data.userType === "1") {
            this.dredge = false;
            this.xufeis = true;
            this.king = true;
            console.log("会员", response.data.userType);
          } else {
            this.king = false;
            console.log("会员", response.data.userType);
          }
          // this.liveDataL=response.data.code
        });
      apis.userData().then((res) => {
        console.log("用户", res);
      });
    }
    // console.log(this.$store.state.chat.xufei.xufeis)
  },
  methods: {
    register() {
      if (this.nameFlag) {
        this.$router.push("/weiTan");
      }
    },
    push_out() {
      if (!this.$store.state.order.user.name) {
        this.$router.push("/weiTan");
      } else {
        this.$router.push({
          name: "giveFriend",
          query: {
            notarize: this.$store.state.order.user.title,
          },
        });
      }
    },
    push_outbut() {
      this.$store.dispatch("order/addCount", { title: "", name: "" });
      this.$router.push("/weiTan");
      localStorage.clear();
      this.$store.commit("order/TreeData", [
        {
          talkCon:
            "hi~小朋友你好呀，我是美可，你可以叫我maco哦，你觉得我的故事好听吗?",
          type: "0",
        },
      ]);
      apis.typuzmianys().then((response) => {
        console.log(response);
      });
    },
    // open(){
    //   this.$router.push('/')
    // },
    goStorys() {
      console.log(22);
      this.$router.push("/myStory");
    },
    goBuy() {
      this.$router.push("/mybuy");
    },
    inviteFriend() {
      this.$router.push("/inviteFriend");
    },
    giveFriend() {
      apis
        .frienddataData({ content: this.$store.state.order.user.title })
        .then((Request) => {
          Request.data.code.forEach((item, index) => {
            item.flag = false;
          });
          console.log(Request.data.code);
          this.$store.commit("order/delCarItem", Request.data.code);
        });

      this.$router.push("/giveFriendss");
    },
    free() {
      this.$router.push("/free");
    },
    MacoAge() {
      this.$router.push("/MacoAge");
    },
    linekefu() {
      this.$router.push("/linekefu");
    },
    babyType() {
      this.$router.push("/babyType");
    },
    // 修改个人信息
    change() {
      this.$router.push("/changeMy");
    },
  },
};
</script>
<style scoped>
@import url("../../../assets/font/iconfont.css");
@import url("../../../assets/font_5qa4r7ssku7/iconfont.css");
.wrap_menuRow_grid {
  flex: 1;
  text-align: center;
  animation: ball 0.5s;
}

/* 此处是动画别动 */
@keyframes ball {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}
.wrap {
  width: 414px;
  height: 736px;
  background-color: #f7f7f7;
  overflow: hidden;
  position: relative;
}
.wrap_header {
  width: 100%;
  height: 284px;
  background-color: #09d0b3;
  border-radius: 0 0 120px 120px;
  position: relative;
  padding: 5px;
}
.icon-weixinxiaochengxu {
  color: #e8e8e8;
  font-size: 27px;
  position: absolute;
  right: 15px;
  top: 35px;
  z-index: 500;
}
._title {
  margin: 0 auto;
  margin-top: 80px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  position: relative;
}
.photo {
  position: absolute;
  z-index: 500;
  left: 180px;
  top: 90px;
  text-align: center;
  color: white;
}
.photo img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}
.yes {
  z-index: 999;
  border: 3px solid #ffc700;
}
._text {
  width: 300px;
  height: 38px;
  background-color: #ffc700;
  border-radius: 10px 10px 0 0;
  position: absolute;
  bottom: -85px;
  right: -130px;
  display: flex;
  border: 1px solid #fff;
}
._text_row {
  text-align: center;
  line-height: 38px;
  vertical-align: middle;
  color: white;
}
._text_row img {
  vertical-align: middle;
}
._text_row:nth-child(1) {
  flex: 0.2;
}
._text_row:nth-child(1) i {
  font-size: 20px;
  flex: 0.2;
}
._text_row:nth-child(2) {
  flex: 0.5;
}
._text_row:nth-child(2) span {
  flex: 0.2;
  font-weight: bold;
}
._text_row:nth-child(3) {
  flex: 0.3;
}
._text_row:nth-child(3) button {
  display: inline-block;
  border: none;
  border-radius: 35px;
  width: 85%;
  height: 20px;
  background: #fe0070;
  color: white;
  font-weight: bold;
}
/* 菜单样式 */
.wrap_menu {
  width: 100%;
  height: 196px;
  background-color: #fff;
  border-radius: 10px 10px 10px 10px;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 232px;
}
.wrap_menuRow {
  flex: 1;
  display: flex;
  justify-content: space-around;
}
.wrap_menuRow:nth-child(1) .wrap_menuRow_grid:nth-child(1) span:nth-child(1) {
  background-color: #09d0b3;
}
.wrap_menuRow:nth-child(1) .wrap_menuRow_grid:nth-child(2) span:nth-child(1) {
  background-color: #ff765c;
}
.wrap_menuRow:nth-child(1) .wrap_menuRow_grid:nth-child(3) span:nth-child(1) {
  background-color: #fea235;
}
.wrap_menuRow:nth-child(1) .wrap_menuRow_grid:nth-child(4) span:nth-child(1) {
  background-color: #b7a9ff;
}

.wrap_menuRow:nth-child(2) .wrap_menuRow_grid:nth-child(1) span:nth-child(1) {
  background-color: #fe7b5d;
}
.wrap_menuRow:nth-child(2) .wrap_menuRow_grid:nth-child(2) span:nth-child(1) {
  background-color: #55d0f1;
}
.wrap_menuRow:nth-child(2) .wrap_menuRow_grid:nth-child(3) span:nth-child(1) {
  background-color: #f15fb0;
}
.wrap_menuRow:nth-child(2) .wrap_menuRow_grid:nth-child(4) span:nth-child(1) {
  background-color: #10dca1;
}

.wrap_menuRow_grid .span {
  width: 100%;
  display: inline-block;
}
.wrap_menuRow_grid .span:nth-child(2) {
  font-size: 13px;
}
.wrap_menuRow_grid .span i {
  line-height: 38px;
  color: white;
}
.wrap_menuRow_grid .span:nth-child(1) {
  margin-top: 17px;
}
.wrap_menuRow_grid .span:nth-child(1) {
  width: 38px;
  height: 38px;
  background-color: #11dba9;
  border-radius: 50%;
}
.wrap_down {
  width: 100%;
  height: 276px;
  margin: 160px 0;
}
.wrap_down_container {
  width: 100%;
  text-align: center;
  padding-top: 10px;
}
.backLogin {
  display: inline-block;
  width: 80%;
  height: 31px;
  background: #ffff;
  border-radius: 35px;
  text-align: center;
  line-height: 31px;
}
.wrap_headerLeft_over span {
  font-size: 27px;
  color: white;
  position: absolute;
  right: 22px;
  top: 35px;
}
.king {
  position: absolute;
  top: -30px;
  left: 10px;
  color: rgb(255, 204, 3);
  z-index: -999;
}
.icon {
  width: 38px;
  height: 38px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  
}
</style>